@use '../../styles/inputs';
@import '../../styles/palette';
@import '../../styles/spaces';

:host {
  height: 100%;

  &.opened {
    width: 240px;
  }

  &.closed {
    width: 50px;
  }

  .sidenav {
    position: fixed;
    z-index: 1000;
    height: calc(100% - 72px);
    top: 72px;
    left: 0;
    background-color: $main-0;
    overflow-x: hidden;
    padding-top: $space-3;

    &.opened {
      width: 240px;
    }

    &.closed {
      width: 50px;
    }

    .menu-grouping-separator {
      border-top: 1px solid $main-20;
      margin: $space-5 $space-3 $space-3;
    }

    .toggle-sidebar-container {
      width: 100%;
      height: 32px;

      .toggle-sidebar-btn {
        bottom: 20px;
        right: 0;
        position: absolute;

        .toggle-sidebar-btn-icon{
          margin: $space-0;
          color: $main-60;
        }
      }
    }
  }

  .sidenav-demo {
    height: calc(100% - 114px);
    top: 114px;
  }
}
